<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

// 日期范围
const dateRange = ref('')

// 报告类型选项
const reportTypeOptions = [
  { value: 'all', label: '全部' },
  { value: 'health', label: '健康报告' },
  { value: 'medical', label: '医疗报告' },
  { value: 'examination', label: '体检报告' },
  { value: 'laboratory', label: '实验室报告' }
]

// 筛选表单
const filterForm = reactive({
  reportType: 'all',
  date: '',
  keyword: ''
})

// 重置筛选条件
const resetFilter = () => {
  filterForm.reportType = 'all'
  filterForm.date = ''
  filterForm.keyword = ''
}

// 搜索报告
const searchReports = () => {
  // 实际应用中这里会调用API获取数据
  console.log('搜索条件:', filterForm)
}

// 模拟报告数据
const reportList = ref([
  {
    id: '1',
    title: '2023年度健康体检报告',
    type: '体检报告',
    date: '2023-12-15',
    doctor: '张医生',
    department: '体检中心',
    status: '已完成',
    result: '正常'
  },
  {
    id: '2',
    title: '血常规检查报告',
    type: '实验室报告',
    date: '2023-11-20',
    doctor: '李医生',
    department: '检验科',
    status: '已完成',
    result: '异常'
  },
  {
    id: '3',
    title: '心电图检查报告',
    type: '医疗报告',
    date: '2023-10-05',
    doctor: '王医生',
    department: '心内科',
    status: '已完成',
    result: '正常'
  },
  {
    id: '4',
    title: '肺功能检查报告',
    type: '医疗报告',
    date: '2023-09-18',
    doctor: '刘医生',
    department: '呼吸科',
    status: '处理中',
    result: '待定'
  },
  {
    id: '5',
    title: '营养健康评估报告',
    type: '健康报告',
    date: '2023-08-30',
    doctor: '赵医生',
    department: '营养科',
    status: '已完成',
    result: '正常'
  }
])

// 查看报告详情
const viewReportDetail = (row: any) => {
  console.log('查看报告详情:', row)
  // 实际应用中这里会打开详情页或弹窗
}

// 下载报告
const downloadReport = (row: any) => {
  console.log('下载报告:', row)
  // 实际应用中这里会调用下载API
}

// 分享报告
const shareReport = (row: any) => {
  console.log('分享报告:', row)
  // 实际应用中这里会打开分享弹窗
}

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100
})

// 页码变化
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val
  // 实际应用中这里会重新加载数据
}

// 每页条数变化
const handleSizeChange = (val: number) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  // 实际应用中这里会重新加载数据
}
</script>

<template>
  <div class="report-management">
    <div class="page-header">
      <h2>报告管理</h2>
      <p>查看和管理您的所有健康和医疗报告</p>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-container">
      <el-form :model="filterForm" inline>
        <el-form-item label="报告类型">
          <el-select v-model="filterForm.reportType" placeholder="选择报告类型">
            <el-option
              v-for="item in reportTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="filterForm.date"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="关键词">
          <el-input v-model="filterForm.keyword" placeholder="输入关键词搜索" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchReports">搜索</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格区域 -->
    <el-table :data="reportList" style="width: 100%" border>
      <el-table-column prop="title" label="报告标题" min-width="200" />
      <el-table-column prop="type" label="报告类型" width="120" />
      <el-table-column prop="date" label="报告日期" width="120" />
      <el-table-column prop="doctor" label="医生" width="100" />
      <el-table-column prop="department" label="科室" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.status === '已完成' ? 'success' : 'warning'">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="result" label="结果" width="100">
        <template #default="{ row }">
          <el-tag
            :type="row.result === '正常' ? 'success' : row.result === '待定' ? 'info' : 'danger'"
          >
            {{ row.result }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="viewReportDetail(row)">查看</el-button>
          <el-button size="small" type="success" @click="downloadReport(row)">下载</el-button>
          <el-button size="small" type="info" @click="shareReport(row)">分享</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped>
.report-management {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-header p {
  font-size: 14px;
  color: #909399;
  margin: 0;
}

.filter-container {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

:deep(.el-table) {
  --el-table-border-color: #ebeef5;
  --el-table-header-bg-color: #f5f7fa;
  margin-bottom: 20px;
}
</style>
